// Vue.prototype.$ELEMENT = { size: 'mini'};
new Vue({
    el: '#app',
    data() {
        const urlDataList = [{
            id: 1,
            name: '新联盟',
            config: {
                "paramType": "application/json",
                "method": "POST",
                "url": "http://206.238.115.218:8080/public/shutdown",
                "params": "",
                "headers": ""
            }
          },{
            id: 2,
            name: '欧克',
            config: {
                "paramType": "application/json",
                "method": "POST",
                "url": "http://206.238.115.218:8080/public/shutdown",
                "params": "",
                "headers": ""
            }
          },{
            id: 3,
            name: '八嘎',
            config: {
                "paramType": "application/json",
                "method": "POST",
                "url": "http://206.238.115.218:8080/public/shutdown",
                "params": "",
                "headers": ""
            }
          }];
        return {
            that: this,
            asideWidth: 300,
            filterText: '',
            defaultProps: {label: 'name'},
            urlDataList,
            selectInterface: {
                id: null,
                name: null,
                config: {
                    paramType: 'x-www-form-urlencoded;charset=UTF-8',
                    method: 'GET',
                    url: null,
                    params: null,
                    headers: null
                }
            },
            methods:[
                {label: 'GET', value: 'GET'},
                {label: 'POST', value: 'POST'},
                {label: 'PUT', value: 'PUT'},
                {label: 'PATCH', value: 'PATCH'},
                {label: 'DELETE', value: 'DELETE'}
            ],
            activeName: 'http-params'
        };
    },
    created() {
        window.addEventListener('beforeunload', (event) => {
            localStorage.setItem('urlDataList', JSON.stringify(this.urlDataList));
        });
    },
    methods: {
        resetInterfaceObj() {
            this.selectInterface = {  id: null, name: null, config: { paramType: 'x-www-form-urlencoded;charset=UTF-8', method: 'GET', url: null, params: null,  headers: null} };
        },
        filterNode(value, data) {
            if (!value) return true;
            return data.name.indexOf(value) !== -1;
        },
        handleNodeClick(data) {
            this.selectInterface = data;
            console.log("handleNodeClick", data);
        },
        remove(node, data) {
            const parent = node.parent;
            const children = parent.data.children || parent.data;
            const index = children.findIndex(d => d.id === data.id);
            children.splice(index, 1);
            this.urlDataList = children;
        },
        handleClick(tab, event) {
            console.log(tab, event);
        }
    },
    watch: {
      filterText(val) {
        this.$refs.tree.filter(val);
      },
      'selectInterface' : {
        handler(newVal, oldVal) {
           console.log(newVal)
           let { id, name } = newVal;
            if(!id){
                let list = this.urlDataList;
                let length = list.length;
                //数据是倒序排的，有数据就拿第一个的id的值加1作为下个对象的id
                id = length === 0 ? 1 : list[0].id + 1;
                console.log(id)
                // this.urlDataList.push({id, name, config: {}});
            }
        },
        deep: true,
        immediate: true
    }
    },
    computed: {
        dataList(){
            return this.urlDataList.sort((a,b)=>b.id-a.id);
        }
    },
    beforeDestroy(){
        localStorage.setItem('urlDataList', JSON.stringify(this.urlDataList));
    },
    directives: {
        resizeable: (el, binding, vnode, oldVnode) => {
            let {ele, min=300, max=500, that} = binding.value;
            if(min > max || min < 0){
                that.$message.warning('数据错误');
                throw new Error('数据错误');
            };
            let startX, startWidth;
            el.addEventListener('mousedown', (event) => {
                startX = event.clientX;
                const element = document.querySelector(ele);
                startWidth = parseFloat(window.getComputedStyle(element).width);
                element.style.transition = 'none';
                document.addEventListener('mousemove', onMouseMove);
                document.addEventListener('mouseup', onMouseUp);
            });
            function onMouseMove(event) {
                const dx = event.clientX - startX;
                const newLeftWidth = startWidth + dx;
                if(newLeftWidth < min){
                     that.asideWidth = min;
                     return;
                }
                if(newLeftWidth > max){
                    that.asideWidth = max;
                    return;
               }
               that.asideWidth = newLeftWidth;
               //const element = document.querySelector(ele);
               //element.style.width = newLeftWidth + 'px';
            }
            function onMouseUp() {
                const element = document.querySelector(ele);
                element.style.removeProperty('transition');
                document.removeEventListener('mousemove', onMouseMove);
                document.removeEventListener('mouseup', onMouseUp);
            }
        }
    }
});